<template>
  <div class="AddVideoNote">
    <van-nav-bar left-text="返回" title="基本信息维护" left-arrow fixed @click-left="onClickLeft" />

    <van-tabs v-model="active" @click="onClick" >
      <van-tab title="基本信息维护">
        <van-row>
          <van-col span="24" class="ItemVideNote_Title">影视内容</van-col>
          <van-col span="24">
            <van-field v-model="title" label="标题" placeholder="请输入视频标题" />
            <van-field v-model="antor" label="主讲人" placeholder="请输入视频主讲人" />
            <van-field
              v-model="episodes"
              type="number"
              label="集数"
              placeholder="请输入视频集数"
              @blur="addItemVideo()"
            />
            <van-field v-model="videoLength" label="视频长度" placeholder="请输入视频长度" />
          </van-col>
        </van-row>

        <van-row>
          <van-col span="24">
            <van-field
              v-model="note"
              rows="2"
              autosize
              label="简介"
              type="textarea"
              maxlength="1000"
              placeholder="请输入简介"
              show-word-limit
            />
          </van-col>
        </van-row>

        <van-row class="ItemVideNote">
          <van-col span="24" class="ItemVideNote_Title">分集剧情描述</van-col>
          <van-col span="24" v-for="(item,index) in this.VideoItem" :key="index" class="ItemVideN">
            <van-field label="集数" v-model="item.index " disabled />
            <van-field v-model="data.Vtitle[index]" label="标题" placeholder="请输入视频标题" />
            <van-field v-model="data.Vlength[index]" label="视频长度" placeholder="请输入视频长度" />
            <van-field
              v-model="data.VNote[index]"
              rows="1"
              autosize
              label="简介"
              type="textarea"
              maxlength="100"
              placeholder="请输入简介"
            />
          </van-col>
        </van-row>
        <van-button type="primary" size="large" class="AddBtn" @click="SaveFileInfo(index)">保存</van-button>
      </van-tab>
      <van-tab title="海报上传">
        <van-cell-group class="uploadImage">
          <van-row class="uploadImage">
            <van-col span="8" class="uploadTitle">上传海报</van-col>
            <van-uploader :after-read="afterRead" multiple :max-count="1"  class="upload_Image"/>
          </van-row>
        </van-cell-group>

        <van-cell-group class="uploadImage">
           <van-row class="uploadImage">
            <van-col span="8" class="uploadTitle">预览</van-col>
           <img :src="imgsrc" class="showPic" alt />
          </van-row>
        </van-cell-group>

        <van-cell-group class="uploadImage">
               <van-button type="primary" size="large" class="AddBtn" @click="uploadBtn(index)" :disabled ="disbaledbtn" >提交海报</van-button>
        </van-cell-group>
      </van-tab>

        <van-tab title="上传视频" >
        <van-cell-group class="uploadVideo"  v-for="(item,index) in this.VideoArry " :key="index"  >
          <van-row class="uploadImage">
            <van-col span="8" class="uploadTitle">上传视频</van-col>
            <van-col span="16" class="uploadTitle">      
              <input type="file" />
            </van-col>
          </van-row>
           <van-row>
               <van-col offset = '16' span="8" >
                    <van-button type="primary" size="small"   @click="upVideo(index)">上传</van-button>
               </van-col>
           </van-row>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      title: "", //标题
      antor: "", //主讲人
      episodes: this.episodes, //集数
      videoLength: "", //视频长度
      note: "",
      Itemtitle: [], //子类标题
      ItemvideoLength: [], //子类视频长度
      Itemnote: [], //子类描述
      VideoItem: [],
      VideoArry:[],
      active: "",
      imgsrc: "",
      disbaledbtn: true,
      data: {
        Vtitle: [], //子类标题
        Vlength: [], //子类视频长度
        VNote: [] //子类描述
      },
      ID:'',
      fileid:null,
      videoData:''
    };
  },
  watch: {
    episodes: function(val) {
      console.log(this.episodes);
      if (this.episodes == null || this.episodes == 0) {
        this.VideoItem.length == 0;
      }
    }
  },
  methods: {

    //返回
    onClickLeft() {
       this.$router.go(-1);
    },
    onClick(name, title) {
      // Toast(title);
      console.log(this.fileid)
      if(this.fileid === null){
           
           Toast('请先提交视频基本信息'); 
           return false;
      }
    },
    //增加子集描述
    addItemVideo() {
      this.VideoItem.length = 0;
      console.log(this.episodes);
      const ds = parseInt(this.episodes) + 1;
      console.log(ds);
      for (var i = 1; i < ds; i++) {
        console.log(i);
        const a = {
          index: i
        };
        this.VideoItem.push(a);
        console.log(this.VideoItem);
      }
    },
    
    //保存信息
    SaveFileInfo() {
      console.log(this.data);
      console.log(this.data);
      console.log(this.data.Vtitle);
      console.log(this.data.Vlength);
      console.log(this.data.VNote);
      const parm =JSON.parse(sessionStorage.getItem('PWD'));
      console.log(parm);
      var array = new Array();
      for (var i = 0; i < this.data.Vtitle.length; i++) {
        const uu = {};
        uu.title = this.data.Vtitle[i];
        uu.videoLength = this.data.Vlength[i];
        uu.note = this.data.VNote[i];
        array.push(uu);
      }
      console.log(array);
      const data = {
        categoryID: parseInt(this.ID),
        title: this.title,
        antor: this.antor,
        note: this.note,
        episodes: parseInt(this.episodes),
        parentID: 0,
        videoLength: this.videoLength,
        isShow_Home: true,
        sort: 0,
        items: array,
        id: 0,
      };
      console.log(data);
      this.videoData = data;
      this.$axios({
        method: "POST",
        url: "/api/User/SaveFileInfo",
        data: data,
        headers: {
          // "Content-Type": "multipart/form-data"
          'sessionKey':parm.sessionKey,
          'authorization':parm.token
        }
      })
        .then(res => {
          if (res.status == 200) {
            //成功以後
            if (res.data.code == 0) {
              console.log(res.data.data.id);
              this.fileid = res.data.data.id;
              this.active = 1;
              this.disbaledbtn = false ;
              this.$toast({
                duration: 1000,
                message: res.data.message
              });
            }
            if (res.data.code == 1) {
              this.$toast({
                duration: 1000,
                message: res.data.message
              });
            }
          }
        })
        .catch(err => {
          console.log(err);
          if (err.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(err.response.data);
            console.log(err.response.status);
            if (err.response.status == 500) {
              this.$toast({
                duration: 1000,
                message: "服务器报错，请联系管理员"
              });
            }
            console.log(err.response.headers);
          } else if (err.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(err.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", err.message);
          }
          console.log(err.config);
        });
    },
    //上传海报
    uploadBtn() {
      var param = new FormData();
      param.fileid = this.fileid 
      param.append("file", this.uploadImage);
      param.append("fileid", this.fileid );
      
      this.$axios({
        method: "POST",
        url: "/api/User/UploadPlaybill",
        data: param,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            if (res.data.code == 0) {
              // console.log(res.data.Data);
              this.$toast({
                duration: 1000,
                message: res.data.message
              });
              this.active = 2;

              this.GetSaveFileInfo();


              //成功以后跳转到前面页面
              // this.$router.push({
              //     path: "/AddVideo",
              //     // query: {
              //     //   title:this.videoData.title,
              //     //   episodes:this.videoData.episodes
              //     // }
              //   })
            }

            if (res.data.code == 1) {
              this.$toast({
                duration: 1000,
                message: res.data.message
              });
            }

          }
        })
        .catch(err => {
          console.log(err);
          if (err.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(err.response.data);
            console.log(err.response.status);
            if (err.response.status == 500) {
              this.$toast({
                duration: 1000,
                message: "服务器报错，请联系管理员"
              });
            }
            console.log(err.response.headers);
          } else if (err.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(err.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", err.message);
          }
          console.log(err.config);
        });
    },
    //获取保存信息
    GetSaveFileInfo(){
      this.$axios({
        method: "get",
        url: "/api/User/GetSaveFileInfo",
        params: {
          fileid: this.fileid
        }
      })
        .then(res => {
          // debugger
          if (res.data.code === 0) {
            // debugger
            console.log(res.data.data);
               console.log(res.data.data.episodes);

                 this.VideoArry.length = 0;
                  console.log(res.data.data.episodes);
                  const ds = parseInt(res.data.data.episodes) + 1;
                  console.log(ds);
                  for (var i = 1; i < ds; i++) {
                    console.log(i);
                    const a = {
                      index: i
                    };
                    this.VideoArry.push(a);
                    console.log(this.VideoArry);
                  }
            //  this.images = res.data.data;
            //  console.log(this.images);
            // this.$toast({
            //   duration: 800,
            //   message: "数据已删除"
            // });
          }
          if (res.data.Code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.Message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //视频上传
    Upload() {

      var param = new FormData();
      
      //FileName //文件名
      //CategoryID //文件分类ID
      //BlockSize  //块 大小
      //BlockIndex  //块索引
      //HashCode  //文件惟一标识
      //File  // 文件内容
      //SaveFileName  //文件保存名字
      //ContentLength //文件长度
      //ContentLengthCompleted //已完成的文件长度
      //ParentID  //父级文件ID
      //Episodes  //集数
      //ID  //编号（主键）

      param.append("FileName", this.uploadImage);
      param.append("CategoryID", this.fileid );
      param.append("BlockSize", this.fileid );
      param.append("BlockIndex", this.fileid );
      param.append("HashCode", this.fileid );
      param.append("SaveFileName", this.fileid );
      param.append("ContentLength", this.fileid );
      param.append("ContentLengthCompleted", this.fileid ); 
      param.append("ParentID", this.fileid );
      param.append("Episodes", this.fileid );
      param.append("ID", this.fileid );
      
      this.$axios({
        method: "POST",
        url: "/api/User/Upload",
        data: param,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            if (res.data.code == 0) {
              // console.log(res.data.Data);
              this.$toast({
                duration: 1000,
                message: res.data.message
              });
              this.active = 2;

              this.GetSaveFileInfo();


              //成功以后跳转到前面页面
              // this.$router.push({
              //     path: "/AddVideo",
              //     // query: {
              //     //   title:this.videoData.title,
              //     //   episodes:this.videoData.episodes
              //     // }
              //   })
            }

            if (res.data.code == 1) {
              this.$toast({
                duration: 1000,
                message: res.data.message
              });
            }

          }
        })
        .catch(err => {
          console.log(err);
          if (err.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(err.response.data);
            console.log(err.response.status);
            if (err.response.status == 500) {
              this.$toast({
                duration: 1000,
                message: "服务器报错，请联系管理员"
              });
            }
            console.log(err.response.headers);
          } else if (err.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(err.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", err.message);
          }
          console.log(err.config);
        });
    },
    afterRead(file) {
      console.log(file);
      this.imgsrc = file.content;
      // 此时可以自行将文件上传至服务器
      console.log(file.file);
      this.uploadImage = file.file;
    }
  },
  //页面初始化钩子函数 created
  created() {
    this.active = 0;
    this.ID = this.$route.query.ID;
    this.$emit("header", false);
    this.$emit("footer", false);
  },
  //页面初始化钩子函数 mounted
  mounted() {

  }
};
</script>
<style lang="less" scoped>
.AddVideoNote {
  .ItemVideNote {
    margin-bottom: 50px;
  }
}

.ItemVideNote_Title {
  /* height: 30px; */
  /* margin-left: 20px; */
  /* background-color: #fff; */
  /* padding-left: 30px; */
  background-color: #fff;
  padding: 5px;
  margin-bottom: 10px;
  /* line-height: 30px; */
  line-height: 30px;
  font-size: 14px;
  border-left: 5px solid blueviolet;
  margin-top: 10px;
}
.ItemVideN {
  margin-bottom: 5px;
}

.AddBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.uploadTitle{
  line-height: 100px;
  padding-left: 50px;
  font-size: 12px;
}
.showPic{
  width: 150px;
  margin: 10px;
}
.upload_Image{
  margin-top: 10px;
  margin-left: 50px;
}

.uploadVideo{
   .uploadTitle{
  line-height: 20px;
  // padding-left: 50px;
  font-size: 12px;
}
}
</style>

